<template>
    <div class="pwdBox">
        <router-link :to="{path:'/index'}">
            <van-button type="default" class="btn">跳过</van-button>
        </router-link>
        <h1 style="margin-top: 50px">
            你好，
            <br>
            欢迎来到你好论坛！
        </h1>
        <h2>账号密码登录</h2>
        <div class="pwdinput">
            <van-cell-group>
                <van-field v-model="user"  placeholder="请输入账号" class="inputbox"/>
                <van-field v-model="password"  placeholder="请输入密码"  class="inputbox" type="password" />
            </van-cell-group>
            <van-button type="info" class="pwdlogin" @click="getlogin">登录</van-button>

        </div>
        <div class="other">
            <router-link :to="{path:'/enroll'}">
                <span>注册</span>
            </router-link>
            <router-link :to="{path:'/forgetpwd'}">
                <span style="float: right">忘记密码？</span>
            </router-link>
        </div>
    </div>
</template>

<script>
    import {Dialog, Toast} from "vant";
    import {login} from "../api/api";

    export default {
        name: "Pwdlogin",
        data(){
            return {
                user:'',
                password:'',
            }
        },
        methods: {
            getlogin(){
                const getloginToast = Toast.loading({
                    duration:0,
                    message: '登录中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                });
                login(this.user,this.password).then(res=>{
                    console.log(res)
                    if(res.data.code==0){
                        console.log(res.data.data)
                        this.$store.commit("changeUserInfo",{userInfo:res.data.data})
                        this.$store.commit("changeLogin",{isLogin:false})
                        getloginToast.clear()
                        Dialog.alert({
                            message: res.data.msg,
                            theme: 'round-button',
                        }).then(() => {
                            // on close

                            this.$router.push('/index')
                        });
                    } else {
                        getloginToast.clear()
                        Dialog.alert({
                            message: res.data.msg,
                            theme: 'round-button',
                        }).then(() => {
                            // on close
                        });
                    }
                })
            }
        },
    }
</script>

<style scoped>
    .btn {
        float: right;
        width: 70px;
    }
    .pwdBox {
        padding: 20px 20px;
    }
    .pwdBox>h2 {
        margin-top: 50px;
        margin-bottom: 50px;
    }
    .inputbox {
        background-color: rgba(128, 128, 128, 0.2) ;
        margin-bottom: 25px;
        font-size: 15px;
    }
    .pwdlogin {
        margin-top: 30px;
        width: 100%;
        height: 40px;
    }
    .other {
        margin-top: 20px;
        margin-bottom: 100px;
    }
    .other>span {
        color: blue;
    }


</style>